<template>
    <div>
        <el-popover
            placement="top-center"
            title="添加流程节点"
            width="180"
            trigger="click"
           
        >
            <div class="node-select">
                <div @click="addApprovalNode">
                    <svg-icon
                        icon-class="seal"
                        style="margin-right: 15px; color: rgb(255, 148, 62)"
                    />
                    <span>审批人</span>
                </div>
                <!-- <div @click="addCcNode">
                    <svg-icon
                        icon-class="s-promotion"
                        style="margin-right: 15px; color: #99ccff"
                    />
                    <span>抄送人</span>
                </div>
                <div @click="addConditionsNode">
                    <svg-icon
                        icon-class="condition"
                        style="margin-right: 15px; color: rgb(21, 188, 131)"
                    />
                    <span>条件分支</span>
                </div> -->
            </div>
            <vxe-button slot="reference"  icon="vxe-icon--plus" status="primary" circle></vxe-button>
        </el-popover>
        <!--       <a-popover title="添加流程节点" width="350" trigger="click">
        <template slot="content">
          <div class="node-select">
            <div @click="addApprovalNode">
              <svg-icon icon-class="seal" style="margin-right: 15px;color:rgb(255, 148, 62);"/>
              <span>审批人</span>
            </div>
            <div @click="addCcNode">
              <svg-icon icon-class="s-promotion" style="margin-right: 15px;color:#99CCFF;"/>
              <span>抄送人</span>
            </div>
            <div @click="addConditionsNode">
              <svg-icon icon-class="condition" style="margin-right: 15px;color:rgb(21, 188, 131);"/>
              <span>条件分支</span>
            </div>
          </div>
        </template>
        <vxe-button icon="vxe-icon--plus" status="primary" circle></vxe-button>
      </a-popover> -->
    </div>
</template>
  
  <script>
export default {
    name: 'InsertButton',
    components: {},
    data() {
        return {}
    },
    computed: {
        selectedNode() {
            this.$store.state.flow.selectedNode
        },
    },
    methods: {
        addApprovalNode() {
            this.$emit('insertNode', 'APPROVAL')
        },
        addCcNode() {
            this.$emit('insertNode', 'CC')
        },
        addDelayNode() {
            this.$emit('insertNode', 'DELAY')
        },
        addConditionsNode() {
            this.$emit('insertNode', 'CONDITIONS')
        },
        addConcurrentsNode() {
            this.$emit('insertNode', 'CONCURRENTS')
        },
        addTriggerNode() {
            this.$emit('insertNode', 'TRIGGER')
        },
    },
}
</script>
  
  <style lang="scss" scoped>
.node-select {
    div {
        display: inline-block;
        margin: 5px 5px;
        cursor: pointer;
        padding: 10px 15px;
        border: 1px solid #f8f9f9;
        background-color: #f8f9f9;
        border-radius: 10px;
        width: 130px;
        position: relative;

        span {
            color: black;
        }

        &:hover {
            background-color: #fff;
            box-shadow: 0 0 8px 2px #d6d6d6;
        }

        i {
            font-size: 25px;
            padding: 5px;
            border: 1px solid #dedfdf;
            border-radius: 14px;
        }
    }
}

.el-icon-s-check:before {
    content: '\e7a7';
}
</style>
  